<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="/restrito/template.xhtml">

<ui:define name="menu"><ui:include src="menu.xhtml" /></ui:define>

<ui:define name="corpo">
	<h:outputScript library="js" name="jquery.maskedinput-1.2.2.js" target="head" />
	<h:outputScript library="js" name="jquery.maskMoney.0.2.js" target="head" />
<div class="container">
	<div class="container-fluid">
		<div class="row-fluid">
			<ui:include src="menulateralprofissional.xhtml" />

			<div class="span9">
				<ui:include src="../mensagem.xhtml"/>
				<h:form id="f" styleClass="form-search">
					<a4j:outputPanel id="pnResultadoMensagem">
					   	<c:if test="#{pesquisarVagaMB.lsVaga != null and empty pesquisarVagaMB.lsVaga}">
					   		<div class="alert"><a class="close" data-dismiss="alert">×</a>Nenhuma vaga encontrada com os filtros informados.</div>
					   	</c:if>
					</a4j:outputPanel>
					<div class="well">
				        <h:outputLabel value="Profissão" style="margin:3px;" />
				        <h:selectOneMenu id="idProfissao" value="#{pesquisarVagaMB.vaga.idProfissao}" style="margin:3px;width:120px">
				        	<a4j:ajax event="change" listener="#{pesquisarVagaMB.onchangeProfissao}" render="idEspecialidade"/>
				        	<f:selectItems value="#{pesquisarVagaMB.lsProfissao}" />
				        </h:selectOneMenu>
		   				<h:selectOneMenu id="idEspecialidade" value="#{pesquisarVagaMB.vaga.idEspecialidade}" style="margin:3px;">
		   					<f:selectItems value="#{pesquisarVagaMB.lsEspecialidade}" />
		   				</h:selectOneMenu>
				        <a4j:commandButton value="Pesquisar" action="#{pesquisarVagaMB.pesquisar}" styleClass="btn" render="pnResultado pnResultadoMensagem"
				        	execute="idProfissao idEspecialidade"/>
			        </div>
			        <a4j:outputPanel id="pnResultado">
			        	<c:if test="#{not empty pesquisarVagaMB.lsVaga}">
						<table class="table table-striped table-bordered tabela">
						<thead>
							<tr>
								<th>Especialidade</th>
								<th>Nº de vagas</th>
								<th>Local</th>
								<th>Valor</th>
								<th>Prazo inscrição</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
						<ui:repeat var="v" value="#{pesquisarVagaMB.lsVaga}" varStatus="i">
							<tr>
								<td>#{v.especialidade}</td>
								<td>#{v.numeroVagas}</td>
								<td>#{v.nomeFantasia}</td>
								<td><h:outputText value="#{v.valor}"><f:converter converterId="conversorDecimal"/></h:outputText></td>
								<td><h:outputText value="#{v.prazoInscricao}"><f:converter converterId="conversorData"/></h:outputText></td>
								<td>
									<a4j:outputPanel rendered="#{v.candidatado}"><span class="label label-info">candidatado</span></a4j:outputPanel>
					  				<a4j:outputPanel rendered="#{not v.candidatado}">
					  					<a data-toggle="modal" href="#modalCandidatar" onclick="jQuery('#f\\:indexVaga').val('#{i.index}'); return false;">candidatar</a>
					  				</a4j:outputPanel>
					  			</td>
						   	</tr>
					   	</ui:repeat>
					   	</tbody>
						</table>
						</c:if>
					</a4j:outputPanel>
					
					<div class="modal hide fade" id="modalCandidatar">
						<div class="modal-header">
							<a class="close" data-dismiss="modal">×</a>
							<h3>Candidatar a vaga</h3>
						</div>
						<div class="modal-body">
							<h:inputHidden id="indexVaga" value="#{pesquisarVagaMB.indexVaga}" />
							<div class="control-group">
								<h:outputLabel for="mensagem" value="* Mensagem para o contratante" styleClass="control-label"/>
					  			<div class="controls">
				  				    <rich:editor id="mensagem" value="#{pesquisarVagaMB.mensagem}" skin="richfaces" toolbar="Basic" />
					  			</div>
							</div>
							<div class="control-group">
								<h:outputLabel for="pretensaoSalarial" value="* Pretensão salarial" styleClass="control-label"/>
					  			<div class="controls">
									<div class="input-prepend input-append">
					    				<span class="add-on">R$</span>
					    				<h:inputText id="pretensaoSalarial" value="#{pesquisarVagaMB.pretensaoSalarial}" styleClass="span2">
					    					<f:converter converterId="conversorDecimal"/>
					    				</h:inputText>
					    				<rich:jQuery selector="#pretensaoSalarial" query="maskMoney({showSymbol:false,length:7})" />
					              	</div>
					  			</div>
							</div>
						</div>
						<div class="modal-footer">
							<a4j:commandButton value="Cancelar" onclick="jQuery('#modalCandidatar').modal('hide'); return false;" styleClass="btn" />
							<a4j:commandButton value="Candidatar" id="btnCandidatar" action="#{pesquisarVagaMB.candidatar}" 
								render="pnResultado" 
								execute="@this indexVaga mensagem pretensaoSalarial"
								oncomplete="jQuery('#modalCandidatar').modal('hide'); return false;" styleClass="btn btn-primary"/>
						</div>
					</div>
				</h:form>
			</div>
		</div>
	</div>
</div>
	<script type="text/javascript">
		jQuery('#1005').addClass('active');
		jQuery('#1005i').addClass('icon-white');
	</script>
</ui:define>
</ui:composition>
</html>
